<template>
  <div class="head-page">
    <div class="head-wrap">
      <i :class="currentMenuInfo.description"></i><span>{{currentMenuInfo.text}}</span>
    </div>
    <div class="newclass">
      <el-tooltip
          class="box-item"
          effect="light"
          content="返回问数"
          placement="left"
      >
        <i class="iconfont icon-fanhui" @click="goToIndex()"></i>
      </el-tooltip>
      <el-popover
          placement="bottom"
          title=""
          trigger="hover"
          content=""
      >
        <template #default>
          <div class="route-link" v-for="(item,index) in menus" :key="index" @click="goToLog(item)">
            {{item.text}}
          </div>
          <div class="route-link-out">
            <el-button type="danger" size="small" @click="lout">退出登录</el-button>
          </div>
        </template>
        <template #reference>
          <div style="display: flex;">
            <img class="newimage" src="@/assets/images/icon_admin.png" alt="" />
            <span class="nspan">您好，{{ userAccount }}</span>
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { toSSO } from '@/common/util'
export default {
  name: 'headPage',
  props:{
    path:{
      type: String,
      // required: true
    },
  },
  data(){
    return{
      userAccount:'',
      menus:[],
      name:'',
      icon:'',
      currentRoute:this.$router.currentRoute.value.path,
      currentMenuInfo:{},
    }
  },
  mounted() {
    // document.head.appendChild(cssLink)
    const unmae = localStorage.getItem('uname')
    const sname = localStorage.getItem('staffName')
    this.userAccount = sname ? sname : unmae
    const menus = JSON.parse(localStorage.getItem('menus'))
    console.log("menus=====>",menus)
    menus.forEach(item=>{
      if(item.url==this.currentRoute){
        this.currentMenuInfo=item;
      }else {
        this.menus.push(item)
      }
    })
  },
  methods:{
    goToLog(param){
      this.$router.push({path:param.url});
    },
    goToIndex(){
      this.$router.push({path:'/'});
    },
    lout(){
      //删除缓存
      localStorage.removeItem("uname")
      localStorage.removeItem("lantId")
      localStorage.removeItem("orgId")
      localStorage.removeItem("orgName")
      localStorage.removeItem("staffName")
      localStorage.removeItem("menus")
      localStorage.removeItem("token")
      toSSO();
    }
  }
}
</script>

<style lang="scss" scoped>
.head-page{
  font-size: 0.1rem;
  color: #5C7CFF;
  display: flex;
  align-items: center;
  height: 0.3rem;
  padding: 0.05rem 0.1rem;
  border-bottom: 1px solid #f1f1f1;
  justify-content: space-between;
  .head-wrap{
    font-size: 0.1rem;
    color: #5C7CFF;
    display: flex;
    align-items: center;
  }
  i{
    //font-size: .2rem;
    color: #5C7CFF;
  }
  span{
    font-weight: bold;
    margin-left: .03rem;
  }
}
.route-link-out,.route-link{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5C7CFF;
  height: 0.2rem;
  cursor: pointer;
  width: 100%;
  background: #fff;
}
.route-link:hover{
  background: #5C7CFF;
  color: #fff;
}
.newclass {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 24px;
  cursor: pointer;
  color: #333;
}
.newimage {
  width: 22px;
  margin-right: 5px;
}
</style>